<template>
	<view class="user">
		<view class="user-info">
			<image class="user-info-bg" src="../../static/bg.png"></image>
			<view class="user-info-avatar" @click="goInfoPage">
				<image v-if="userInfo.head" :src="userInfo.head" mode="aspectFill"></image>
				<image v-else src="../../static/touxiang.png" mode="aspectFill"></image>
			</view>
			<view class="user-info-text color5">
				<view class="vName">{{ userInfo.name || userInfo.tel }}</view>
				<view class="vId">
					<view class="vId-name">会员号:</view>
					<view>{{ userInfo.id }}</view>
				</view>
				<view class="vType bg3" :style="{ backgroundColor: vipColor }" v-if="userInfo.vip">
					{{ userInfo.vip }}
				</view>
			</view>
		</view>
		<view class="user-item-wrap">
			<block v-for="(item, index) in userList" :key="index">
				<view class="user-item" @click="goItemPage(item.url)" hover-class="item-hover">
					<view class="itemAvatar" :style="{ backgroundColor: item.bg }">
						<view class="iconfont" :class="item.icon"></view>
					</view>
					<view class="itemText">{{ item.name }}</view>
				</view>
			</block>
		</view>
		<view class="user-cell">
			<!-- <view class="user-cell-friend">
				<van-cell
				url="/pages/user/friend"
				  title="我的好友"
				  is-link>
					<view slot="icon" class="iconfont iconicon--"></view>
				</van-cell>
			</view> -->

			<van-cell-group>
				<block v-for="(key, index) in userInfoList" :key="index">
					<van-cell
						:title="key.name"
						@click="goCellPage(key.url)"
						:value="key.value"
						is-link
					>
						<view slot="icon" class="iconfont" :class="key.icon"></view>
					</van-cell>
				</block>
			</van-cell-group>
		</view>
	</view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			version: '',
			userList: [
				{
					name: '个人设置',
					icon: 'iconshezhi',
					url: '/pages/user/info/index',
					bg: '#129eff'
				},
				{
					name: '邀请好友',
					icon: 'iconyaoqing1',
					url: '/pages/user/invite/index',
					bg: '#ff4d56'
				},
				{
					name: '邀请奖励',
					icon: 'iconyaoqingjiangli',
					url: '/pages/user/contacts',
					bg: '#ac72ff'
				},
				{
					name: '标签收藏',
					icon: 'iconlvsefenkaicankaoxianban-',
					url: '',
					bg: '#ffb000'
				}
			],
			userInfoList: [
				{
					name: '关于我们',
					icon: 'iconguanyuwomen',
					value: '',
					url: '/pages/user/about'
				},
				{
					name: '商家申请',
					icon: 'iconbusiness',
					value: '',
					url: '/pages/user/apply-store/index'
				},
				{
					name: '客服中心',
					icon: 'iconkefu',
					value: '',
					url: '/pages/user/service'
				},
				{
					name: '检查更新',
					icon: 'iconicon--gengxin',
					value: '1.01',
					url: ''
				}
			],
			vType: [
				{
					name: '粉丝',
					color: '#aace36'
				},
				{
					name: '普通节点',
					color: '#ed803d'
				},
				{
					name: '初级节点',
					color: '#d2e3eb'
				},
				{
					name: '中级节点',
					color: '#f4ad00'
				},
				{
					name: '高级节点',
					color: '#c163fa'
				},
				{
					name: '超级节点',
					color: '#7000c4'
				}
			]
		};
	},
	onReady() {
		this.setStyle(0, true, '9');
	},
	onLoad() {
		this.getUpdate();
	},
	onShow() {
		//#ifdef APP-PLUS
		this.version = plus.runtime.version;
		this.userInfoList[3].value = this.version;
		//#endif
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		}),
		vipColor() {
			for (let i of this.vType) {
				if (i.name === this.userInfo.vip) {
					return i.color;
				}
			}
		}
	},
	methods: {
		...mapActions([
			'setUpdate'
		]),
		onSubmit() {},
		goItemPage(url) {
			if (url) {
				uni.navigateTo({
					url: url
				});
				return;
			}
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		goInfoPage() {
			uni.navigateTo({
				url: '/pages/user/info/index'
			});
		},
		goCellPage(url) {
			if (url) {
				uni.navigateTo({
					url: url
				});
			} else {
				this.getUpdate('click');
			}
		},
		getUpdate(key) {
			this.$http.getVersion().then(e => {
				if (!e.data.version) return;
				if (e.data.version !== this.version) {
					// this.download(e.data);
					this.setUpdate(e.data)
					uni.showModal({
						title: '提示',
						content: '检测到新版本' + e.data.version,
						confirmText: '马上更新',
						cancelText: '稍后更新',
						success: info => {
							if (info.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/user/update/index'
									});
								},500)
							}
						}
					});
					return;
				}
				if (!key) return
				let content = '当前为最新版本' + this.version;
				uni.showModal({
					title: '提示',
					content: content,
					showCancel: false,
					success: res => {
						if (res.confirm) {
						}
					}
				});
			});
		},
		download(e) {
			uni.showModal({
				title: '提示',
				content: '检测到新版本' + e.version,
				confirmText: '马上更新',
				cancelText: '稍后更新',
				success: info => {
					if (info.confirm) {
						plus.runtime.openURL(e.url);
					}
				}
			});
		},
		setStyle(index, show, text) {
			/**
			 * 修改导航栏buttons
			 * index[number] 修改的buttons 下标索引，最右边索引为0
			 * show[boolean] 显示还是隐藏角标或者红点
			 * text[string] 需要修改的角标的text 内容 ，如果定义redDot 此参数无效 ，如果定义badgeText请设置具体，如果不用输入
			 */
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			if (show) {
				if (index === 0) {
					currentWebview.showTitleNViewButtonRedDot({ index: index, text: text });
				} else {
					currentWebview.setTitleNViewButtonBadge({ index: index, text: text });
				}
			} else {
				if (index === 0) {
					currentWebview.hideTitleNViewButtonRedDot({ index: index });
				} else {
					currentWebview.removeTitleNViewButtonBadge({ index: index });
				}
			}

			// #endif
		}
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/user/notice/index'
		});
		// 取消红点或者角标
		this.setStyle(e.index, false);
	},
	onPullDownRefresh() {
		console.log('onPullDownRefresh');
		setTimeout(function() {
			uni.stopPullDownRefresh();
			console.log('stopPullDownRefresh');
		}, 1000);
	}
};
</script>

<style lang="scss" scoped>
$color: #7e7e7e;
image {
	width: 100%;
	height: 100%;
}
.user {
	&-nav-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 98;
	}
	&-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		.iconxinfeng {
			font-size: 42upx;
		}
	}
	&-info {
		position: relative;
		display: flex;
		align-items: center;
		padding: 30upx;
		height: 400upx;
		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
		&-avatar {
			width: 128upx;
			height: 128upx;
			overflow: hidden;
			border: 2upx solid #fff;
			border-radius: 100%;
			background-color: #fff;
		}
		&-text {
			flex: 1;
			margin-left: 30upx;
			overflow: hidden;
			.vName {
				font-size: 48upx;
				line-height: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.vId {
				display: flex;
				margin: 10upx 0;
				font-size: 24upx;
				line-height: 1.2;
				&-name {
					width: 142upx;
				}
			}
			.vType {
				max-width: 90upx;
				height: 28upx;
				font-size: 20upx;
				text-align: center;
				line-height: 28upx;
				border-radius: 10%;
			}
		}
	}
	&-item-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10upx 30upx;
		margin-bottom: 30upx;
		background-color: #fff;
	}
	&-item {
		text-align: center;
		padding: 10upx 30upx;
		.itemAvatar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 60upx;
			height: 60upx;
			margin: auto;
			color: #fff;
			text-align: center;
			overflow: hidden;
			border-radius: 100%;
			.iconfont {
				margin: auto;
				font-size: 36upx;
			}
		}
		.itemText {
			margin-top: 20upx;
			font-size: 24upx;
			color: #8f8f94;
		}
	}

	&-cell {
		&-friend {
			margin-bottom: 30upx;
		}
		.iconfont {
			font-size: 36upx;
			margin-right: 10upx;
		}
		.iconicon-- {
			font-size: 38upx;
		}
	}
}
.uni-grid-9-item-hover {
	background: rgba(0, 0, 0, 0.05);
}
.unl-item-hover {
	background: rgba(0, 0, 0, 0.05);
}
</style>
